import { setProp } from '../common/setProp';

/**
 * 对比属性
 * @param newEL 新节点的真实 DOM
 * @param oldProps 旧节点的属性
 * @param newProps 新节点的属性
 */
export const patchProps = (
  newEL: HTMLElement,
  oldProps: Record<string, any>,
  newProps: Record<string, any>
) => {
  // 修改旧属性
  Object.entries(newProps).forEach(([key, value]) => {
    if (oldProps[key] !== value) setProp(newEL, key, value);
  });
  // 移除旧属性
  Object.keys(oldProps).forEach((key) => {
    if (!(key in newProps)) removeProp(newEL, key, oldProps[key]);
  });
};

/**
 * 移除元素属性
 * @param el 要移除属性的元素
 * @param key 属性名
 * @param value 属性值
 */
function removeProp(el: HTMLElement, key: string, value: any) {
  if (key === 'class') {
    el.className = '';
  } else if (key === 'style') {
    Object.keys(value as Record<string, string>).forEach((k) => {
      el.style.removeProperty(k);
    });
  } else if (key.startsWith('on')) {
    const eventName = key.slice(2).toLowerCase();
    el.removeEventListener(eventName, value);
  } else {
    el.removeAttribute(key);
  }
}
